<template>
	<view>
		<!-- status -->
		<view class="status"></view>
		<!-- 头部 -->
		<view class="detail-nav">
			<text class="nav-icon cuIcon-back" @tap="goBack()"></text>
			<view class="detail-name">
				电影
			</view>
		</view>
		<!-- 电影选项卡 -->
		<view class="movie-option">
			<view class="opt">
				<view class="opt-item" :class="movieSort==0?'selected':''" @tap="changeSort(0, 24)">
					综合排序
				</view>
				<view class="opt-item" :class="movieSort==1?'selected':''" @tap="changeSort(1, 11)">
					热播榜
				</view>
				<view class="opt-item" :class="movieSort==2?'selected':''" @tap="changeSort(2, 8)">
					好评榜
				</view>
				<view class="opt-item" :class="movieSort==3?'selected':''" @tap="changeSort(3, 4)">
					新上线
				</view>
			</view>
			<!-- 地区 -->
			<view class="opt">
				<view class="opt-item" :class="movieArea==0?'selected':''" @tap="changeArea(0, 0)">
					全部地区
				</view>
				<view class="opt-item" :class="movieArea==1?'selected':''" @tap="changeArea(1, 1)">
					华语
				</view>
				<view class="opt-item" :class="movieArea==2?'selected':''" @tap="changeArea(2, 28997)">
					港台
				</view>
				<view class="opt-item" :class="movieArea==3?'selected':''" @tap="changeArea(3, 2)">
					美国
				</view>
				<view class="opt-item" :class="movieArea==4?'selected':''" @tap="changeArea(4, 3)">
					欧洲
				</view>
				<view class="area-more" @tap="showAreaMore()">
					更多
				</view>
			</view>
			<view class="opt" v-show="area_more">
				<view class="opt-item" :class="movieArea==5?'selected':''" @tap="changeArea(5, 4)">
					韩国
				</view>
				<view class="opt-item" :class="movieArea==6?'selected':''" @tap="changeArea(6, 1115)">
					泰国
				</view>
				<view class="opt-item" :class="movieArea==7?'selected':''" @tap="changeArea(7, 28999)">
					印度
				</view>
				<view class="opt-item" :class="movieArea==8?'selected':''" @tap="changeArea(8, 308)">
					日本
				</view>
				<view class="opt-item" :class="movieArea==9?'selected':''" @tap="changeArea(9, 5)">
					其他
				</view>
			</view>
			<!-- 电影类型 -->
			<view class="opt">
				<view class="opt-item" :class="movieType==0?'selected':''" @tap="changeType(0, 0)">
					全部类型
				</view>
				<view class="opt-item" :class="movieType==1?'selected':''" @tap="changeType(1, 8)">
					喜剧
				</view>
				<view class="opt-item" :class="movieType==2?'selected':''" @tap="changeType(2, 6)">
					爱情
				</view>
				<view class="opt-item" :class="movieType==3?'selected':''" @tap="changeType(3, 11)">
					动作
				</view>
				<view class="opt-item" :class="movieType==4?'selected':''" @tap="changeType(4, 131)">
					枪战
				</view>
				<view class="area-more" @tap="showTypeMore()">
					更多
				</view>
			</view>
			<view class="opt" v-show="type_more">
				<view class="opt-item" :class="movieType==5?'selected':''" @tap="changeType(5, 291)">
					犯罪
				</view>
				<view class="opt-item" :class="movieType==6?'selected':''" @tap="changeType(6, 128)">
					惊悚
				</view>
				<view class="opt-item" :class="movieType==7?'selected':''" @tap="changeType(7, 10)">
					恐怖
				</view>
				<view class="opt-item" :class="movieType==8?'selected':''" @tap="changeType(8, 289)">
					悬疑
				</view>
				<view class="opt-item" :class="movieType==9?'selected':''" @tap="changeType(9, 12)">
					动画
				</view>
				<view class="opt-item" :class="movieType==10?'selected':''" @tap="changeType(10, 27356)">
					家庭
				</view>
			</view>
			<view class="opt" v-show="type_more">
				<view class="opt-item" :class="movieType==11?'selected':''" @tap="changeType(11, 1284)">
					奇幻
				</view>
				<view class="opt-item" :class="movieType==12?'selected':''" @tap="changeType(12, 129)">
					魔幻
				</view>
				<view class="opt-item" :class="movieType==13?'selected':''" @tap="changeType(13, 9)">
					科幻
				</view>
				<view class="opt-item" :class="movieType==14?'selected':''" @tap="changeType(14, 7)">
					战争
				</view>
				<view class="opt-item" :class="movieType==15?'selected':''" @tap="changeType(15, 130)">
					青春
				</view>
			</view>
		</view>
	
		<!-- 电影列表 -->
		<view class="main">
			<view class="movie-box" v-for="(item, index) in movie" :key="index" @tap="goDetail(item.title, item.img, item.href)">
				<image :src="item.img" mode=""></image>
				<view class="movie-name">
					{{item.title}}
				</view>
			</view>
		</view>
		
		<!-- last -->
		<view class="last" v-show="ifShowLast">
			没有更多啦&nbsp;~
		</view>
	</view>
</template>

<script>
	import $ from '../../static/jquery.js';
	export default {
		data() {
			return {
				movieSort: 0,
				movieArea: 0,
				movieType: 0,
				area_more: false,
				type_more: false,
				sorts: '24',
				type: '-1',
				pageId: 1,
				movie:[],
				ifShowLast: false
			}
		},
		onLoad(){
			this.getMovie();
		},
		onReachBottom() {
			if(this.pageId<20){
				this.pageId += 1;
				this.getMovie();
			}else{
				this.ifShowLast = true;
			}
			
		},
		methods: {
			goBack(){
				history.back();
			},
			changeSort(id, sort){
				this.movieSort = id;
				this.sorts = sort;
				
			},
			showAreaMore(){
				this.area_more = !this.area_more;
			},
			changeArea(id, type){
				this.movieArea = id;
				this.type = type;
				
			},
			showTypeMore(){
				this.type_more = !this.type_more;
			},
			changeType(id, type){
				this.movieType = id;
				this.type = type;
			},
			getMovie(){
				uni.showLoading({
					title: '数据加载中',
					mask: true,
				});
				uni.request({
					url: 'https://list.iqiyi.com/www/1/'+this.type+'-------------'+this.sort+'-'+this.pageId+'-1-iqiyi--.html',
					success: (res) => {
						//console.log(res.data);
						$(res.data).find('.qy-mod-link').map((index, data)=>{
							var title = $(data).attr('title');
							var href = 'https:' + $(data).attr('href');
							var img = 'https:' + $(data).children().attr('src');
							//var img = 'https:' + this.getImg(href);
							console.log(img);
							var movie = {
								title,
								href,
								img
							}
							this.movie.push(movie);
						})
					},
				});
				uni.hideLoading();
			},
			getImg(url){
				uni.request({
					url: url,
				}).then(data => {
					var[err, res] = data;
					return $(res.data).find('.mod-img-link').attr('src');
					
				})
			},
			goDetail(title, img, href){
				uni.navigateTo({
					url: '../detail/detail?title='+title+'&img='+img+'&href=' + href
				})
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
